<template>
  <div class="blog-create-container">
    <immersive-blog-editor />
  </div>
</template>
<script setup lang="ts">
import { watch, onUnmounted } from 'vue';
import { ElNotification } from 'element-plus';
import ImmersiveBlogEditor from './components/ImmersiveBlogEditor.vue';
import { useTokenExpiredStore } from '@/store/modules/tokenExpired';

const tokenExpiredStore = useTokenExpiredStore();

// 使用watch监听token过期状态，完全Vue3风格
const stopWatcher = watch(
  () => tokenExpiredStore.isShowingTokenDialog,
  (isShowing) => {
    if (isShowing) {
      ElNotification({
        title: '提醒',
        message: '检测到您有未保存的文章内容，建议您先保存内容再重新登录',
        type: 'info',
        duration: 6000,
        showClose: true
      });
    }
  },
  { immediate: false }
);

// 组件卸载时停止监听
onUnmounted(() => {
  stopWatcher();
});
</script>

<style scoped lang="scss">
.blog-create-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
  position: relative;

  // 添加微妙的背景纹理
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(25, 103, 210, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(251, 188, 4, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  // 确保内容在背景之上
  > * {
    position: relative;
    z-index: 1;
  }
}
</style>
